﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>过滤器,自定义过滤器,双向过滤器， 自定义指令</title>
	<style type="text/css">
		body,html{
			margin:0;
			padding:0;
		}
	</style>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		<!-- capitalize（首字母大写）,uppercase,lowercase,currency,orderBy(1,-1),limitBy a b (a:取几个值 b:从哪开始),filterBy,debounce  在低版本这些可以直接用，高版本做了修改-->
		<!-- 自定义过滤器用filter -->
		window.onload = function(){
			//自定义指令
			Vue.directive("red",function(color){
				//this.el.style.background="#f00";//this.el 原生写法
				this.el.style.background=color;
			});
			Vue.directive("drag",function(){
				var oDiv = this.el;
				oDiv.onmousedown = function(e){
					var e = e || window.event;
					var disX = e.clientX - oDiv.offsetLeft,
						disY = e.clientY - oDiv.offsetTop;					
					document.onmousemove = function(e){
						var e = e || window.event;
						var l = e.clientX - disX,
							t =  e.clientY - disY;
						var oWidth = document.documentElement.clientWidth - parseInt(oDiv.style.width),
							oHeight = document.documentElement.clientHeight - parseInt(oDiv.style.height);
							if(l < 0){
								l = 0;
							}else if(l > oWidth){
								l = oWidth;
							}
							if(t < 0){
								t = 0;
							}else if(t > oHeight){
								t = oHeight;
							}
						oDiv.style.left = l + "px";
						oDiv.style.top = t + "px";
					}
					document.onmouseup = function(){
						document.onmousemove = null;
						document.onmouseup = null;
				
					}
					return false; //加个这个是避免 鼠标脱离之后还能拖拽
				}
			});
			
			//自定义元素指令
			Vue.elementDirective("abc",{
				bind:function(){
					this.el.style.background="gray";
				}
			});
			
			//自定义键盘信息,键值 keyCode  2.0的是Vue.config.keyCodes.ctrl=17;
			Vue.directive("on").keyCodes.ctrl = 17;
		
			var vm=new Vue({
				el:"#box",
				data:{
					msg:"<p>这是一个段落</p>",
					c:"blue"
				},
				methods:{
					show:function(){
						alert(1);
					}
				}
				
			});
		}
		
	</script>
</head>
<body>
	<div id="box">
		<p v-html="msg" v-red></p>
		<!-- 传数据的形式,传参;也可以直接写在元素里，此时没有data.c了 -->
		<p v-html="msg" v-red="c"></p> 
		<p v-html="msg" v-red="'yellow'"></p> 
		
		<!--自定义元素指令,用处不大-->
		<abc>ddddd</abc>
		
		<!-- 绝对定位不可少 -->
		<p :style="{width:'100px',height:'100px',background:'#f00',position:'absolute',left:0,top:0}" v-drag></p>
		
		<!-- 自定义键盘信息  延迟debounce-->
		<input type="" @keydown.enter="show" />
		<input type="" @keydown.a="show" />
		<input type="" @keydown.ctrl="show | debounce 2000" />
	</div>
	
	
</body>
</html>